<template>
  <div class="index">
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <h2 class="subtitle" style="margin-top: 20px; margin-left: 5px">温湿度记录</h2>
    </el-row>
    <el-row :span="8">
      <el-col :span="8">
        <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
      </el-col>
      <el-col :span="8">
        <chart ref="chart1" :options="pieOptions" :auto-resize="true"></chart>
      </el-col>
      <el-col :span="8">
        <chart ref="chart1" :options="scatterOptions" :auto-resize="true"></chart>
      </el-col>
    </el-row>
    <el-row :span="8">
      <el-col :span="8">
        <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
      </el-col>
      <el-col :span="8">
        <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
      </el-col>
      <el-col :span="8">
        <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'chart-test',
  data () {
    return {
      orgOptions: {},
      pieOptions: {},
      scatterOptions: {}
    }
  },
  mounted () {
    this.orgOptions = {
      title: {
        text: 'line chart test'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }]
    }
    this.pieOptions = {
      title: {
        text: 'pie chart test'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        right: 'right',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.scatterOptions = {
      title: {
        text: 'scatter chart test'
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [[-10, -10], [-9, -9], [-8, -8], [-7, -7], [-6, -6], [-5, -5], [-4, -4], [-3, -3], [-2, -2], [-1, -1], [0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10]],
        type: 'scatter'
      }]
    }
  }
}
</script>

<style>
  .index {
    width: 100%;
    height: 100%;
    background-color: #e6e9f2;
  }
</style>
